﻿/**
 *  @author amalafe
 */

Namespace("sketch.ui.common");

(function () {
    // using
    var common = sketch.ui.common,
        fwk = sketch.framework,
        txt = sketch.framework.text;

    common.TextArea = klass(fwk.Rectangle, {
        __type__:"ui.common.TextArea",
        _constructor: function () {
            this.properties.createProperty("text", "Text", "Sample text");
            this.properties.createProperty("textAlign", "Text alignment", "left");
            this.properties.createProperty("verticalAlign", "Vertical alignment", "top");
            this.properties.createProperty("singleLine", "Is single line", false);
            this.properties.createProperty("font", "Font", new fwk.Font()).editable().useInModel();

//            this._drawBuffer = new fwk.DrawBuffer();

//            this.properties.propertyChanged.bind(EventHandler(this, this.onPropertyChanged));

            this.width(100);
            this.height(50);
            this.clipSelf(true);
            this.createTextImage();
        },
        text:function(/*str*/value) {
            return this.properties.text(value);
        },
        textAlign:function(/*str*/value) {
            return this.properties.textAlign(value);
        },
        singleLine: function(value){
            return this.properties.singleLine(value);
        },
        verticalAlign:function(/*str*/value) {
            return this.properties.verticalAlign(value);
        },
        font:function(/*Font*/value) {
            return this.properties.font(value);
        },
        getType: function () {
            return "TextArea";
        },
        onPropertyChanged : function(events) {
//            for (var i = 0, length = events.length; i < length; i++) {
//                var event = events[i];
//                if (event.property != 'left' || event.property != 'top') {
//                    this.createTextImage();
//                    return;
//                }
//            }
        },

        createTextImage:function() {
//            var width = this.width(),
//                height = this.height(),
//                font = this.font(),
//                context = this._drawBuffer.context,
//                lineHeight = font.lineHeight();
//
//            this._drawBuffer.width(width);
//            this._drawBuffer.height(height);
//            this._drawBuffer.clear();
//
//            context.save();
//            context.textBaseline = 'top';
//            context.textAlign = "left";
//            context.font = font.cssString();
//            context.fillStyle = font.color();
//            var spaceSize = context.measureText(" ").width;
//            var tokens = txt.Tokenizer.tokenize(this.text());
//            var lines = txt.TextMeasure.updateTokens(tokens, width, this.textAlign(), function(token) {
//                var size = context.measureText(token.value).width;
//                var spaces = token.length - token.value.length;
//                return {minWidth:size, width:(size + spaces * spaceSize)};
//            });
//
//            var fontSize = this.font().size();
//            var widthOffset = 0;
//            if (this.verticalAlign() === 'middle') {
//                widthOffset = (lineHeight - fontSize) / 2;
//            }
//
//            for (var i = 0, ll = tokens.length; i < ll; i++) {
//                var tokensLine = tokens[i];
//                for (var j = 0, tl = tokensLine.length; j < tl; j++) {
//                    var token = tokensLine[j];
//                    context.fillText(token.value, token.x + lines[token.line].offset, token.line * lineHeight + widthOffset);
//                }
//            }
//
//            context.restore();
        },
        drawSelf:function(context) {
//            this._drawBuffer.draw(context, this.left(), this.top());
            var width = this.width(),
                height = this.height(),
                x = this.left(),
                y = this.top(),
                font = this.font(),
                lineHeight = this.singleLine() ? height : font.lineHeight();
                //TODO: do not tokenize if single line

            context.textBaseline = 'top';
            context.textAlign = "left";
            context.font = font.cssString();
            context.fillStyle = font.color();

            var spaceSize = context.measureText(" ").width;
            var tokens = txt.Tokenizer.tokenize(this.text());
            var lines = txt.TextMeasure.updateTokens(tokens, width, this.textAlign(), function(token) {
                var size = context.measureText(token.value).width;
                var spaces = token.length - token.value.length;
                return {minWidth:size, width:(size + spaces * spaceSize)};
            });

            var fontSize = this.font().size();
            var widthOffset = 0;
            if (this.verticalAlign() === 'middle') {
                widthOffset = (lineHeight - fontSize) / 2;
            }

            for (var i = 0, ll = tokens.length; i < ll; i++) {
                var tokensLine = tokens[i];
                for (var j = 0, tl = tokensLine.length; j < tl; j++) {
                    var token = tokensLine[j];
                    context.fillText(token.value, x + token.x + lines[token.line].offset, y + token.line * lineHeight + widthOffset);
                }
            }
        },
        mousedown:function(event) {
            if (this.editor != null) {
                this.text(this.editor.value());
                this.editor.hide();
                this.parent().releaseMouse(this);
                event.handled = true;
                this.editor = null;
            }
        },
        mousemove:function(event) {
            if (this.editor != null) {
                event.handled = true;
            }
        },
        dblclick : function(event) {
            this.parent().captureMouse(this);
            this.editor = new txt.InplaceEditor(this.parent(), true);
            this.editor.show(this.text(), this.left(), this.top(), this.width(), this.height());
        }
    });

})();
